<template>
	<view class="content">
		<view class="bagua">
			<view>
				☰乾 ☱兑 ☳震 ☷坤 ☲离 ☴巽 ☶艮 ☵坎
			</view>
		</view>
		<view class="inp">
			<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
				class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in bagua" :key="index">{{item}}</view>

				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in bagua" :key="index+'2'">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view>
			<image mode="aspectFit" src="/static/lssg.png" @error="imageError" @click="previewImage"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visible: true,
				indicatorStyle: `height: 50px;`,
				value: [0, 0],
				shangua: "",
				xiagua: "",
				bagua: ["☰乾",
					"☱兑",
					"☳震",
					"☷坤",
					"☲离",
					"☴巽",
					"☶艮",
					"☵坎",
				]
			}
		},
		methods: {
			bindChange(e) {
				const val = e.detail.value
				this.shangua = val[0]
				this.xiagua = val[1]
				console.log(this.bagua[this.shangua] + this.bagua[this.xiagua]);
			},
			previewImage() {
				uni.previewImage({
					urls: ["/static/lssg.png"], //多张的时候加，
					current: "", // 点击后显示的图片路径，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			}

		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding-left: 1rem;
		padding-right: 1rem;

		.bagua {
			box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;

			height: 100px;
			padding: 16px;


			view {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 34px;
			}
		}

		.inp {
			margin: 14px 0px;

		}

		.picker-view {
			width: 750rpx;
			height: 400rpx;
			margin-top: 20rpx;
		}

		.item {
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>
